<template>
  <PageWrapper contentFullHeight fixedHeight contentClass="main-box" style="overflow:none">
    <CommonDateSearch ref="searchRef" @search="handleSearch"></CommonDateSearch>

    <div class="sub-content-box" v-loading="loading">

      <div class="column-box chart-box  " v-for="item in lineTypeList" :key="item.dictCode">
        <Line :loading="item.loading" :chartData="item.chartData" :title="item.itemName" />
      </div>

    </div>
  </PageWrapper>
</template>
<script setup>
import Line from '@/components/Charts/Line/index.vue'
import Pie from '@/components/Charts/Pie/index.vue'
import { getDictListByCode } from '@/api/sys/dict'

import { getTotalLineData, getTypeLineData, getBarData } from '@/api/carbon/calc'
import { ref, onMounted, reactive, computed, watch } from 'vue'
import dayjs from 'dayjs'
import { PageWrapper } from '@/components/Page'
import CommonDateSearch from './CommonDateSearch.vue'
import Icon from '@/components/Icon/Icon.vue'
// import { options } from './data'
import Detail from './Detail.vue'
import ColdAndHeatSources from '../consume/ColdAndHeatSources.vue'
import HotWaterAndSecondaryPump from '../consume//HotWaterAndSecondaryPump.vue'
import WaterSourceHeatPump from '../consume//WaterSourceHeatPump.vue'
import MediumTemperatureHeatRecovery from '../consume/MediumTemperatureHeatRecovery.vue'
import MediumTemperatureChilledWater from '../consume/MediumTemperatureChilledWater.vue'
import LowTemperatureChilledWater from '../consume/LowTemperatureChilledWater.vue'
import Exhuaust from '../consume/Exhuaust.vue'
import Mau from '../consume/Mau.vue'
import { getChartChildListData } from "@/api/common/chart"


defineOptions({ name: 'Consume' })

const props = defineProps({
  chart: {
    type: Object,
    default: () => ({}),
  },
})



const options = reactive([])

const dataReady = ref(false)


const searchRef = ref()
const searchInfo = ref()
const lineTypeList = ref([])
const currentTab = ref('detail')
const dictCode = props.chart
const distributionTab = ref(options[0]?.value || 0);
const exportLoading = ref(false)// 默认选中第一个选项
const chartData = ref()
onMounted(async () => {
  // await getdata()
  await getTypeList()
  searchRef.value.handleSearch()


})

const handleSearch = async (params) => {
  // searchInfo.value = params

  getLineChartData(params)
}

// const changeOptions = (val) => {

//   options.forEach(item => {

//     if (item.value == distributionTab.value) {
//       console.log(item);
//       searchInfo.value.dictCode = item.dictCode
//       searchInfo.value.itemName = item.label
//       currentTab.value = item.label
//     }

//   })
//   console.log(searchInfo, "searchInfosearchInfo");


// }
// const getdata = async () => {//获取标签
//   const ress = await getDictListByCode(dictCode)
//   ress.forEach((element, index) => {
//     options[index] = {
//       label: element.itemName,
//       value: index++,

//       dictCode: element.dictCode
//     }

//   });
//   if (options.length > 0) {
//     distributionTab.value = options[0].value
//     currentTab.value = options[0].label
//     searchInfo.value.dictCode = options[0].dictCode
//     searchInfo.value.itemName = options[0].label
//   }


// }
const getTypeList = async () => {
  const res = await getDictListByCode(dictCode)
  dataReady.value = true
  lineTypeList.value = res.map((item) => ({
    ...item,
    loading: true,
    chartData: [],
  }))


}
const getLineChartData = (searchInfo) => {
  console.log(searchInfo);

  lineTypeList.value.forEach((item) => {
    item.loading = true
    getChartChildListData(
      {
        ...searchInfo,
        dictCode,
        itemName: item.itemName,
      }

    )
      .then((res) => {
        console.log(res, "这是");

        item.chartData = res
      })
      .finally(() => {
        item.loading = false
      })
  })
}
watch(
  () => searchInfo,
  (newValue) => {
    if (Object.values(newValue).length > 0) {
      handleSearch(newValue)
    }
  },
  { immediate: true },
)
</script>
<style scoped lang="scss">
.sub-content-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 100%;
  overflow: auto;

  .column-box {
    width: 50%;
    height: 100%;
  }

  .chart-box {
    /* flex-shrink: 0; */

    /* width: calc(100% / 3); */
    height: 45%;
    padding: 4px;
  }
}
</style>
